﻿<!DOCTYPE html />
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Calendar prototype (10 minute time unit)</title>
    <link href="Styles/jquery.mobile-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.structure-1.2.0.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile.theme-1.2.0.css" rel="stylesheet" />
    <link href="Styles/uCalendar.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="Scripts/plugins/jquery.mobile.uCalendar.js" type="text/javascript"></script>
    <script src="Scripts/date.js" type="text/javascript"></script>
    <script src="Scripts/dayEventCache.js" type="text/javascript"></script>
    <script type="text/javascript">
        var dayViewPages = ["dayViewPage", "dayViewPage2"];

        function goToPreviousDay(fromPage, toPage) {
            var $fromPage = $("#" + fromPage);
            var $header = $fromPage.children(":jqmData(role=header)");
            var fromDate = Date.parseExact($header.find("h1").html(), ["yyyy.MM.dd"]);
            var toDate;
            if (fromDate) {
                toDate = fromDate.addDays(-1);
            }
            else {
                toDate = Date.today().addDays(-1);
            }
            var toDateStr = toDate.toString("yyyyMMdd");
            $.mobile.changePage("#" + toPage + "?date=D" + toDateStr, { transition: "slide" });
        }
        function goToNextDay(fromPage, toPage) {
            var $fromPage = $("#" + fromPage);
            var $header = $fromPage.children(":jqmData(role=header)");
            var fromDate = Date.parseExact($header.find("h1").html(), ["yyyy.MM.dd"]);
            var toDate;
            if (fromDate) {
                toDate = fromDate.addDays(1);
            }
            else {
                toDate = Date.today().addDays(1);
            }
            var toDateStr = toDate.toString("yyyyMMdd");
            $.mobile.changePage("#" + toPage + "?date=D" + toDateStr, { transition: "slide", reverse: true });
        }
        function goToDayView(urlObj, options) {

            var dateName = urlObj.hash.replace(/.*date=/, "");
            var date = Date.parseExact(dateName.substr(1), ["yyyyMMdd"]);
            var dayEvents = dayEventCache.getDayEvents(date)

            // The pages we use to display our content are already in
            // the DOM. The id of the page we are going to write our
            // content into is specified in the hash before the '?'.
            var pageSelector = urlObj.hash.replace(/\?.*$/, "");
            //if (dayEvents) {

            // Get the page we are going to dump our content into.
            var $page = $(pageSelector);

            // Get the header for the page.
            var $header = $page.children(":jqmData(role=header)");

            // Get the content area element for the page.
            var $content = $page.children(":jqmData(role=content)");

            // Find the h1 element in our header and inject the name of
            // the category into it.
            $header.find("h1").html(date.toString("yyyy.MM.dd"));

            // Pages are lazily enhanced. We call page() on the page
            // element to make sure it is always enhanced before we
            // attempt to enhance the listview markup we just injected.
            // Subsequent calls to page() are ignored since a page/widget
            // can only be enhanced once.
            $page.page();

            var uCalendar = $page.find(".calendarWrapper");
            uCalendar.uCalendar("renderDayEvents", dayEvents);
            options.dataUrl = urlObj.href;

            // Now call changePage() and tell it to switch to
            // the page we just modified.
            $.mobile.changePage($page, options);
        }
        function gotoSettings() {
            $.mobile.changePage("#setupPage", {
                transition: "slideUp"
            });
        }
        function gotoListView() {
            $.mobile.changePage("#listViewPage", {
                transition: "slideUp"
            });
        }

        function saveSettings() {
            var timeSlotUnit = $("input[name*=timeSlotUnit]:checked").val();
            var timeSlotHeight = $("#timeSlotHeight").val();
            $(".calendarWrapper").each(function (index, value) {
                var options = $(value).data("options");
                if (options) {
                    options.timeSlotUnit = timeSlotUnit;
                    options.timeSlotHeight = timeSlotHeight;
                }
                else {
                    options = { timeSlotUnit: timeSlotUnit, timeSlotHeight: timeSlotHeight };
                }
                if ($(value).data("uCalendar")) {
                    $(value).uCalendar("redraw", options);
                }
                else {
                    $(value).data("options", options)
                }
            });

            $.mobile.changePage("#dayViewPage?date=D20130104", {
                transition: "slideDown"
            });
        }

        function cancelSettings() {
            var uCalendar = $(".calendarWrapper").first();
            var appliedOption = $(uCalendar).data("uCalendar");
            $("#timeSlotHeight").val("" + appliedOption.timeSlotHeight);
            $("#timeSlotHeight").slider("refresh");
            $("input[name*=timeSlotUnit]").each(function (index, value) {
                var isChecked = $(value).val() == appliedOption.timeSlotUnit;
                //alert($(value).prop("checked"));
                $(value).prop("checked", isChecked);
                $(value).checkboxradio("refresh")
            });
            $.mobile.changePage("#dayViewPage?date=D20130104", {
                transition: "slideDown"
            });
        }

        function switchToDayView() {
            $.mobile.changePage("#dayViewPage?date=D20130104", {
                transition: "slideDown"
            });
        }

        // Listen for any attempts to call changePage().
        $(document).bind("pagebeforechange", function (e, data) {
            // We only want to handle changePage() calls where the caller is
            // asking us to load a page by URL.
            if (typeof data.toPage === "string") {
                // We are being asked to load a page by URL, but we only
                // want to handle URLs that request the data for a specific
                // category.
                var u = $.mobile.path.parseUrl(data.toPage),
			    re = /^#dayViewPage/;

                if (u.hash.search(re) !== -1) {
                    // We're being asked to display the items for a specific category.
                    // Call our internal method that builds the content for the category
                    // on the fly based on our in-memory category data structure.
                    goToDayView(u, data.options);

                    // Make sure to tell changePage() we've handled this call so it doesn't
                    // have to do anything.
                    e.preventDefault();
                }
            }
        });

        $(document).delegate("#dayViewPage", "pageinit", function () {
            var toDate = new Date();
            var pathData = $.mobile.path.parseUrl(window.location);
            var currentDate = pathData.hash.replace(/.*date=/, "");
            if (currentDate != "") {
                toDate = Date.parseExact(currentDate.substr(1), ["yyyyMMdd"]);
            }
            var toDateStr = toDate.toString("yyyyMMdd");

            $.mobile.changePage("#dayViewPage?date=D" + toDateStr, { transition: "slide" });
        });

        //        $('document').on('swipeleft', swipeleftHandler);

        //        function swipeleftHandler(event) {
        //            alert(event);
        //        }

        $(document).ready(function (e) {
            $("#dayViewPage").live('swipeleft swiperight', function (event) {
                if (event.type == "swiperight") {
                    goToNextDay("dayViewPage", "dayViewPage2");
                }
                else {
                    goToPreviousDay("dayViewPage", "dayViewPage2");
                }
            });
            $("#dayViewPage2").live('swipeleft swiperight', function (event) {
                if (event.type == "swiperight") {
                    goToNextDay("dayViewPage2", "dayViewPage");
                }
                else {
                    goToPreviousDay("dayViewPage2", "dayViewPage");
                }
            });
        });  
    </script>
</head>
<body>
    <div data-role="page" id="dayViewPage">
        <div data-theme="c" data-role="header">
            <a href="javascript:goToPreviousDay('dayViewPage', 'dayViewPage2')" data-role="button"
                data-icon="arrow-l" data-iconpos="notext"></a>
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                2012.06.10</h1>
            <a href="javascript:goToNextDay('dayViewPage', 'dayViewPage2')" data-role="button"
                data-icon="arrow-r" data-iconpos="notext">Down</a>
        </div>
        <div data-role="content" style="padding: 0px">
            <div class="calendarWrapper" data-role="uCalendar">
            </div>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li><a href="#" data-icon="grid">Month View</a></li>
                    <li><a href="javascript:gotoSettings()" data-icon="gear">Setup</a></li>
                    <li><a href="javascript:gotoListView()" data-icon="star">List View</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="dayViewPage2">
        <div data-theme="c" data-role="header">
            <a href="javascript:goToPreviousDay('dayViewPage2', 'dayViewPage')" data-role="button"
                data-icon="arrow-l" data-iconpos="notext">Up</a>
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                2012.06.10</h1>
            <a href="javascript:goToNextDay('dayViewPage2', 'dayViewPage')" data-role="button"
                data-icon="arrow-r" data-iconpos="notext">Down</a>
        </div>
        <div data-role="content" style="padding: 0px">
            <div class="calendarWrapper" data-role="uCalendar">
            </div>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li><a href="#" data-icon="grid">Month View</a></li>
                    <li><a href="javascript:gotoSettings()" data-icon="gear">Setup</a></li>
                    <li><a href="javascript:gotoListView()" data-icon="star">List View</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="listViewPage">
        <div data-theme="c" data-role="header">
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                2012.06.10</h1>
        </div>
        <div data-role="content" style="padding: 0 10px 0 10px">
            <div data-role="collapsible-set" data-content-theme="d" data-inset="false">
                <div data-role="collapsible">
                    <h2>
                        Mailbox</h2>
                    <ul data-role="listview">
                        <li><a href="prototype.html">Inbox <span class="ui-li-count">12</span></a></li>
                        <li><a href="prototype.html">Outbox <span class="ui-li-count">0</span></a></li>
                        <li><a href="prototype.html">Drafts <span class="ui-li-count">4</span></a></li>
                        <li><a href="prototype.html">Sent <span class="ui-li-count">328</span></a></li>
                        <li><a href="prototype.html">Trash <span class="ui-li-count">62</span></a></li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h2>
                        Calendar</h2>
                    <ul data-role="listview" data-theme="d" data-divider-theme="d">
                        <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
                        <li><a href="prototype.html">
                            <h3>
                                Stephen Weber</h3>
                            <p>
                                <strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                            <p>
                                Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                jQuery team.</p>
                            <p class="ui-li-aside">
                                <strong>6:24</strong>PM</p>
                        </a></li>
                        <li><a href="prototype.html">
                            <h3>
                                jQuery Team</h3>
                            <p>
                                <strong>Boston Conference Planning</strong></p>
                            <p>
                                In preparation for the upcoming conference in Boston, we need to start gathering
                                a list of sponsors and speakers.</p>
                            <p class="ui-li-aside">
                                <strong>9:18</strong>AM</p>
                        </a></li>
                        <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
                        <li><a href="prototype.html">
                            <h3>
                                Avery Walker</h3>
                            <p>
                                <strong>Re: Dinner Tonight</strong></p>
                            <p>
                                Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
                            </p>
                            <p class="ui-li-aside">
                                <strong>4:48</strong>PM</p>
                        </a></li>
                        <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
                        <li><a href="prototype.html">
                            <h3>
                                Amazon.com</h3>
                            <p>
                                <strong>4-for-3 Books for Kids</strong></p>
                            <p>
                                As someone who has purchased children's books from our 4-for-3 Store, you may be
                                interested in these featured books.</p>
                            <p class="ui-li-aside">
                                <strong>12:47</strong>PM</p>
                        </a></li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h2>
                        Contacts</h2>
                    <ul data-role="listview" data-autodividers="true" data-theme="d" data-divider-theme="d">
                        <li><a href="prototype.html">Adam Kinkaid</a></li>
                        <li><a href="prototype.html">Alex Wickerham</a></li>
                        <li><a href="prototype.html">Avery Johnson</a></li>
                        <li><a href="prototype.html">Bob Cabot</a></li>
                        <li><a href="prototype.html">Caleb Booth</a></li>
                        <li><a href="prototype.html">Christopher Adams</a></li>
                        <li><a href="prototype.html">Culver James</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li><a href="#" data-icon="grid">Month View</a></li>
                    <li><a href="javascript:switchToDayView()" data-icon="star">Day View</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="setupPage">
        <div data-theme="c" data-role="header">
            <h1 style="margin: 0; font-size: 22px; line-height: 42px">
                Calendar Setup</h1>
        </div>
        <div data-role="content" style="padding: 10px">
            <form id="calendarSettingForm" action="prototype.html" method="get">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Time Slot Unit:</legend>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit5" value="5" />
                    <label for="timeSlotUnit5">
                        5</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit10" value="10" />
                    <label for="timeSlotUnit10">
                        10</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit15" value="15" />
                    <label for="timeSlotUnit15">
                        15</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit20" value="20" checked="checked" />
                    <label for="timeSlotUnit20">
                        20</label>
                    <input type="radio" name="timeSlotUnit" id="timeSlotUnit30" value="30" />
                    <label for="timeSlotUnit30">
                        30</label>
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <label for="timeSlotHeight">
                    Time Slot Height:</label>
                <input type="range" name="timeSlotHeight" id="timeSlotHeight" value="15" min="10"
                    max="30" />
            </div>
            <div>
                <a href="javascript:cancelSettings()" data-role="button" data-icon="delete" data-inline="true">
                    Cancel</a> <a href="javascript:saveSettings()" data-role="button" data-icon="check"
                        data-theme="b" data-inline="true">OK</a>
            </div>
            </form>
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
            <h3>
                Footer
            </h3>
        </div>
    </div>
</body>
</html>
